<!-- 充值 -->
<template>
  <view class="draw-money-wrap u-p-b-30">
    <view class="head-box">
      <shopro-navbar
        :background="{ background: navBackground }"
        :backTextStyle="{ color: '#fff' }"
        backText="充值"
        backIconColor="#fff"
      ></shopro-navbar>
      <!-- 账户 -->
      <view class="wallet-num-box u-flex u-col-center u-row-between">
        <view class="">
          <view class="num-title">账户余额（元）</view>
          <view class="wallet-num">{{ userInfo.money || '0.00' }}</view>
        </view>
        <button
          class="u-reset-button log-btn"
          @tap="$Router.push({ path: '/pages/user/wallet/top-up-log' })"
        >
          充值记录
        </button>
      </view>
    </view>
    <!-- 充值输入卡片-->
    <view class="draw-card">
      <view class="card-title">充值金额</view>
      <view class="input-box u-flex u-col-center">
        <view calss="unit">￥</view>
        <input
          class="u-flex-1 u-p-l-10"
          type="digit"
          @focus="onTopupFous"
          @input="onTopupInput"
          v-model="money"
          placeholder-style="font-size: 30rpx; font-weight: 500;color:#C2C7CF;"
          placeholder="请输入充值金额"
        />
      </view>
      <!-- 快捷充值 -->
      <view class="top-up-content u-p-b-30" v-if="initRecharge.moneys.length">
        <view class="card-title">快捷充值</view>
        <view class="u-flex u-flex-wrap">
          <view
            class="top-up-card u-flex u-row-center u-col-center u-m-b-30 u-m-r-30"
            :class="{ 'top-up-active': curMoneyCard === index }"
            v-for="(item, index) in initRecharge.moneys"
            :key="index"
            @tap="selectCard(index)"
          >
            <view class="top-up-value">
              {{ item.money }}
            </view>
          </view>
        </view>
      </view>
      <button
        class="u-reset-button save-btn"
        :style="{ opacity: !money ? 0.7 : 1 }"
        :disabled="!money"
        @tap="confirmTopup"
      >
        确认充值
      </button>
    </view>

    <!-- 充值说明 -->
    <view class="draw-notice">
      <view class="title">充值说明</view>
      <view class="draw-list">1.充值为在线支付，即时到账，不支持退款；</view>
      <view class="draw-list">
        2.充值后金额会自动进入您的余额账户，请注意查收。
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import FormValidate from '@/shopro/validate/form';
import wechat from '@/shopro/wechat/wechat';
export default {
  components: {},
  data() {
    return {
      money: '', //提现金额
      showModal: false,
      curMoneyCard: '',
      navBackground: 'none',
    };
  },
  computed: {
    ...mapGetters(['userInfo', 'initRecharge']),
  },
  async onLoad() {},
  onPageScroll(e) {
    this.navBackground =
      e.scrollTop > 50
        ? `url(${this.$IMG_URL}/imgs/user/draw_money_head_bg.png) no-repeat top / 100% auto`
        : 'none';
  },
  methods: {
    // 充值输入框
    onTopupInput(e) {
      this.$nextTick(() => {
        this.money = this.clearNoNum(e.detail.value);
      });
    },
    // 获取焦点
    onTopupFous() {
      this.curMoneyCard = '';
    },

    // 选择充值卡片
    selectCard(index) {
      this.curMoneyCard = index;
      this.money = this.initRecharge.moneys[index].money;
    },

    confirmTopup() {
      const that = this;
      if (this.money <= 0) {
        this.$u.toast('请选择或输入充值金额');
        return;
      }
      that
        .$http(
          'money.recharge',
          {
            recharge_money: that.money,
          },
          '确认中...'
        )
        .then((res) => {
          if (res.code === 1) {
            that.money = '';
            that.$Router.push({
              path: `/pages/order/payment/method`,
              query: {
                orderId: res.data.id,
                orderType: 'recharge',
              },
            });
          } else {
            that.$u.toast(res.msg);
          }
        });
    },

    // 校验金额
    clearNoNum(val) {
      if (val == '.') {
        val = '0.';
      }
      val = val.replace(/[^\d.]/g, '');
      //必须保证第一个为数字而不是.
      val = val.replace(/^\./g, '');
      //保证只有出现一个.而没有多个.
      val = val.replace(/\.{2,}/g, '.');
      //保证.只出现一次，而不能出现两次以上
      val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
      //只能输入两位小数
      val = val.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
      if (val.indexOf('.') < 0 && val != '') {
        //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        val = parseFloat(val);
      }
      return val;
    },
  },
};
</script>

<style lang="scss">
.head-box {
  // background: url($IMG_URL+'/imgs/user/draw_money_head_bg.png') no-repeat;
  background-size: 100% auto;
  min-height: 400rpx;
  padding-bottom: var(--status-bar-height);
  background: #a084f0;

  // 可提现
  .wallet-num-box {
    padding: 20rpx 40rpx 0;

    .num-title {
      font-size: 26rpx;
      font-weight: 500;
      color: #ffffff;
      margin-bottom: 20rpx;
    }

    .wallet-num {
      font-size: 60rpx;
      font-weight: 500;
      color: #ffffff;
    }

    .log-btn {
      width: 170rpx;
      height: 60rpx;
      line-height: 60rpx;
      background: rgba(255, 255, 255, 0.1);
      border: 1rpx solid #eeeeee;
      border-radius: 30rpx;
      padding: 0;
      font-size: 26rpx;
      font-weight: 500;
      color: #ffffff;
    }
  }
}

// 提现输入卡片
.draw-card {
  background-color: #fff;
  border-radius: 20rpx;
  width: 690rpx;
  min-height: 400rpx;
  margin: -70rpx auto 30rpx;
  padding: 30rpx;

  .card-title {
    font-size: 30rpx;
    font-weight: 500;
    color: #333333;
    margin-bottom: 30rpx;
  }

  .input-box {
    width: 624rpx;
    border-bottom: 1rpx solid #eee;
    height: 100rpx;
    margin-bottom: 40rpx;

    .unit {
      font-size: 48rpx;
      color: #333;
    }
  }

  .save-btn {
    width: 616rpx;
    height: 86rpx;
    line-height: 86rpx;
    background: linear-gradient(to right, #a085f0, #80abf9);
    box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
    border-radius: 43rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #ffffff;
  }

  // 充值卡片
  .top-up-card {
    width: 190rpx;
    height: 124rpx;
    background: #f7f6fb;
    border-radius: 12rpx;
    transition: all linear 0.2s;

    &:nth-of-type(3n) {
      margin-right: 0 !important;
    }

    .top-up-value {
      font-size: 36rpx;
      font-weight: 500;
      color: #999999;

      &::after {
        content: '元';
        font-size: 24rpx;
      }
    }
  }

  .top-up-active {
    background: #564bbd;
    transition: all linear 0.2s;

    .top-up-value {
      color: #fff;
    }
  }
}

// 提现说明
.draw-notice {
  width: 684rpx;
  min-height: 180rpx;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx 35rpx;
  margin: 20rpx auto;

  .title {
    font-size: 30rpx;
    font-weight: 500;
    color: #333333;
    margin-bottom: 30rpx;
  }

  .draw-list {
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    margin-bottom: 10rpx;
  }
}
</style>
